<template>
  <!--点播-->
  <div>
    <div id="player"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      vodPlayerJs: 'https://player.polyv.net/script/player.js',
    }
  },
  props: {
    vid: {
      type: String,
    },
    playsafe: {
      type: String,
    },
    viewerInfo: {
      type: Object,
    },
    loading_bg_img: {
      type: String,
    },
  },
  mounted() {
    this.loadPlayerScript(this.loadPlayer);
  },
  methods: {
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement('script');
        myScript.setAttribute('src', this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
    loadPlayer() {
      const polyvPlayer = window.polyvPlayer;
      this.player = polyvPlayer({
        wrap: '#player',
        width: '100%',
        height: 300,
        vid: this.vid,
        playsafe: this.playsafe,
        viewerInfo: this.viewerInfo,
        loading_bg_img: this.loading_bg_img
      });
    }
  },
}
</script>

<style scoped>
#player {
  margin: 20px 0;
}
</style>
